<template>
	<el-form :model="conforderform" ref="conforderform" label-width="100px" class="demo-ruleForm">
		<el-form-item :inline="true" label="上次所提议题">
			<!-- 渲染问题列表 -->
			<section v-for="(value, index) in conforderform.lastquestions" :key="index">
				<section v-if="index === 0">
					<el-row>
						<el-col :span="10">
							<el-input v-model="conforderform.lastquestions[index]" placeholder="请输入上次所提议题" clearable @keyup.enter.native="addlastitems(index, '1')" />
						</el-col>
						<el-col :span="5">
							<el-input v-model="conforderform.lastquestions2[index]" placeholder="请输入上次所提议题" clearable @keyup.enter.native="addlastitems(index, '1')" />
						</el-col>
						<el-col :span="4">
							<el-button type="primary" icon="el-icon-plus" plain style="margin-left:10px;" circle @click="addlastitems(index, '1')" />
						</el-col>
					</el-row>
				</section>
				<section v-if="index > 0">
					<!-- 添加的子项目 -->
					<el-row style="margin-top:10px;">
						<el-col :span="10">
							<el-input v-model="conforderform.lastquestions[index]" placeholder="请输入上次所提议题" clearable @keyup.enter.native="addlastitems(index, '1')" />
						</el-col>
						<el-col :span="5">
							<el-input v-model="conforderform.lastquestions2[index]" placeholder="请输入上次所提议题" clearable @keyup.enter.native="addlastitems(index, '1')" />
						</el-col>
						<el-col :span="4">
							<el-button type="danger" icon="el-icon-delete" plain style="margin-left:10px;" circle @click="rmlastitems(index, '1')" />
						</el-col>
					</el-row>
				</section>
			</section>
		</el-form-item>
		<el-form-item>
			<!--确认 收集数据给父组件并禁用文本框  编辑是文本框可编辑-->
			<el-button @click="sub">确认</el-button>
			<el-button @click="edit">编辑</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
  data () {
    return {
      // 会议预约提交表单
      conforderform: {
        lastquestions: [''], // 上次所提议题
        lastquestions2: [''], // 上次所提议题
        all: [], // 收集所有
        curquesttions: [''], // 待解决的问题
        suggestions: [''] // 建议解决的方案
      }
    }
  },
  methods: {
    // 添加上次所提议题
    addlastitems (index, type) {
      if (type === '1') {
        const lastitem = this.conforderform.lastquestions[this.conforderform.lastquestions.length - 1]
        const lastitem2 = this.conforderform.lastquestions2[this.conforderform.lastquestions2.length - 1]
        console.log(lastitem)
        console.log(lastitem2)
        console.log(this.conforderform.lastquestions)
        console.log(this.conforderform.lastquestions2)
        if (lastitem.trim() === '' || lastitem2.trim() === '') {
          this.$message.error('请您填写完一项后继续追加')
        } else {
          this.conforderform.lastquestions.push('')
        }
      } else if (type === '2') {
        const lastitem = this.conforderform.curquesttions[this.conforderform.curquesttions.length - 1]
        if (lastitem.trim() === '') {
          this.$message.error('请您填写完一项后继续追加')
        } else {
          this.conforderform.curquesttions.push('')
        }
      } else if (type === '3') {
        const lastitem = this.conforderform.suggestions[this.conforderform.suggestions.length - 1]
        if (lastitem.trim() === '') {
          this.$message.error('请您填写完一项后继续追加')
        } else {
          this.conforderform.suggestions.push('')
        }
      }
    },
    rmlastitems (index, type) {
      switch (type) {
        case '1':
          this.conforderform.lastquestions.splice(index, 1)
          this.conforderform.lastquestions2.splice(index, 1)
          break
        case '2':
          this.conforderform.curquesttions.splice(index, 1)
          break
        case '3':
          this.conforderform.suggestions.splice(index, 1)
          break
        default:
          break
      }
      console.log(this.conforderform.lastquestions)
      this.$message.success('移除成功')
    },
    sub () {
      for (var i = 0; i < this.conforderform.lastquestions.length; i++) {
        // 每循环一次，得到一个材料对象，然后加入到数组里
        var m = {
          msName: this.conforderform.lastquestions[i],
          msNumber: this.conforderform.lastquestions2[i]
        }
        this.conforderform.all[i] = m // 存入数组
      }
      console.log(this.conforderform.all)
    }
  }
}
</script>

<style>
</style>
